<template>
  <div class="user-container flex flex-row">
    <div class="flex flex-col w-full items-center">
      <div class="box basicInfo p-5 flex flex-col justify-between">
        <div class="font-bold text-3xl font-mono">个人中心</div>
        <div class="flex flex-row">
          <el-avatar
            size="large"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <div class="flex items-center ml-4 text-xl">{{ userStore.userinfo.name }}</div>
        </div>
      </div>
      <el-menu
        style="width: 100%;"
        :default-active="pageStore.activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item
          index="1"
          @click="pageStore.goToUserInfo"
        >🏠主页</el-menu-item>
        <el-menu-item
          index="2"
          @click="pageStore.goToUserFav"
        >❤我的喜欢</el-menu-item>
        <el-menu-item
          index="3"
          @click="pageStore.goToUserPublish"
        >📺️我的发布</el-menu-item>
        <el-menu-item
          index="4"
          v-if="userStore.userinfo.gender === 1"
          @click="pageStore.gotoModifyInfo"
        >👨我的信息</el-menu-item>
        <el-menu-item
          index="4"
          v-else
          @click="pageStore.gotoModifyInfo"
        >👩我的信息</el-menu-item>
        <el-menu-item
          index="5"
          @click="pageStore.goToPublish"
        >🎥我要发布</el-menu-item>
      </el-menu>
    </div>
  </div>
  <div class="w-full flex">
    <router-view />
  </div>

</template>

<script lang="ts" setup>
import { useUserStore } from '../../stores/user'
const userStore = useUserStore()
import { usePageStore } from '../../stores/page'
const pageStore = usePageStore()
</script>

<style scoped>
.user-container {
  width: 100%;
}

.box {
  background-color: white;
  box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.024),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}

.basicInfo {
  width: 100%;
  height: 20vh;
  background-color: #ffdee9;
  background-image: linear-gradient(
    167deg,
    #ffdee9 15%,
    #b5fffc 30%,
    #ffffff 53%,
    #ffffff 99%,
    #ffffff 100%
  );
}
</style>